<template>
    <el-table :data="store.getters['cate/getCate']" style="width: 100%; margin-bottom: 20px" row-key="id" border
        default-expand-all :tree-props="{ children: 'children' }">
        <el-table-column prop="id" label="分类编号" sortable width="180"></el-table-column>
        <el-table-column prop="catename" label="分类名称" width="180"></el-table-column>
        <el-table-column prop="img" label="图片">
            <template v-slot="item">
                <img v-if="item.row.pid !== 0" :src="item.row.img" alt="">
            </template>
        </el-table-column>


        <el-table-column prop="status" label="状态">
            <template v-slot="item">
                <el-button v-if="item.row.status === 1" type="primary" size="small">启用</el-button>
                <el-button v-else type="danger" size="small">禁用</el-button>
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template v-slot="scope">
                <el-button @click="edit(scope.row.id)" type="primary" size="small">编辑</el-button>
                <el-button @click="del(scope.row.id)" type="danger" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script lang="ts" setup>
import { useStore } from 'vuex'
import { onMounted, computed, defineProps, defineEmits } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import { cateDel } from '@/request/api'

const store = useStore()
store.dispatch('cate/listActions')

let emits = defineEmits(['edit'])

const edit = (id: any) => {
    emits('edit', id)
}

const del = (id: any) => {
    ElMessageBox.confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        cateDel({ id }).then((res: any) => {
            // console.log(res);
            if (res.code === 200) {
                //消息提示
                ElMessage.success(res.msg)
                //更新列表
                store.dispatch('cate/listActions')
            } else {
                ElMessage.error(res.msg)
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        });
    })
}
</script>

<style>
img {
    width: 100px;
    height: 100px;
}
</style>